<script setup>
import { ref } from 'vue'
// 动画 animate.css
import "animate.css"
const show = ref(false)
const changeShow = () =>  {
                show.value = !show.value
            }
</script>
<template>
  <button @click="changeShow">切换动画效果</button>
  <transition enter-active-class="animate__animated animate__zoomIn"
    leave-active-class="animate__animated animate__zoomOut">
    <div v-show="show">当自定义变量show为true时显示（从最小不断变大到原始大小），为false时不断变小直到隐藏</div>
  </transition>
  <h1>我是个人组件</h1>
</template>
<style lang="less" scoped></style>